<template>
  <div class="container">
    <div class="top"></div>
    <div class='Popup-one' v-show='pop_one'>
      <div class='Popup-one-top'>
        {{list}}
      </div>
      <div class='Popup-one-bottom '>
        <img src="static/image/X-btn.png" alt="" @click='cxsure(false)'>
        <img src="static/image/Accept-btn.png" alt="" @click='cxsure(true)'>
      </div>
    </div>
    <div class="bottom">
      <h2>账户充值</h2>
      <div class="fir">
        <span>账户充值:</span>
        <div class="right">
          <div class="btns">
            <!-- <a href="javascript:;" v-for='(item,index) in numberlist' :key='index' @click='number=parseInt(item)'>{{item}}</a> -->
            <p>金种子: <input type="text" v-model="gold" min="0" class="reset">
              <img src="../../../static/image/z_arrowup.png" @click='gold++' />
              <img src="../../../static/image/z_arrowd.png" class="down" @click='gold>0?gold--:""' />
            </p>

            <p>银种子: <input type="text" v-model="ying" min="0" class="reset">
              <img src="../../../static/image/z_arrowup.png" @click='ying++' />
              <img src="../../../static/image/z_arrowd.png" class="down" @click='ying>0?ying--:""' />
            </p>

            <p>铜种子: <input type="text" v-model="tong" min="0" class="reset">
              <img src="../../../static/image/z_arrowup.png" @click='tong++' />
              <img src="../../../static/image/z_arrowd.png" class="down" @click='tong>0?tong--:""' />
            </p>

          </div>
          <div class="count">
            <!-- <p>数量:</p>
                  <input type="text" v-model="number" min="0" class="reset"> -->
            <!-- <img src="../../../static/image/z_arrowup.png" @click='number++'/>
	        				  <img src="../../../static/image/z_arrowd.png" class="down" @click='number>0?number--:""'/> -->
            <!-- <a href="javascript:;">

	        				</a> -->
          </div>
        </div>
      </div>
      <div>
        <!-- <span class='g1-title' data-title="提币地址:">提币地址:</span>
        <span class='g2'>
          <input type="text" v-model="address">
        </span> -->
      </div>
      <div class="sec">
        <span>充值金额:</span>
        <div class="pay">
          <p>{{total}}{{gametype}}</p>

          <div class="agree">
            <img src="../../../static/image/z_ok.png" />
            <p>我已阅读活动规则，充值金额不可提现、退款</p>
          </div>
          <a href="javascript:;" @click="shop">充值</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "ginsengRecharge",
  data() {
    return {
      choose: false,
      number: 0,
      money: u.getStore("money") || 10000,
      jlflag: true,
      freemount: u.getStore("freezing_amount"),
      gold: 0,
      ying: 0,
      address: "",
      tong: 0,
      exchange: null,
      gametype: u.getStore("winning").type,
      bpx: 0,
      list: "是否确定充值",
      pop_one: false,
    };
  },
  created() {
    let exchange = JSON.parse(localStorage.getItem("exchange"));
    this.exchange = exchange;
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },

  computed: {
    total() {
      this.bpx =
        (parseInt(this.gold) * u.getStore("winning").gold || 0) +
        (parseInt(this.ying) * u.getStore("winning").silver || 0) +
        (parseInt(this.tong) * u.getStore("winning").copper || 0);
      return this.bpx >= 0 ? this.bpx : 0;
    }
  },
  methods: {
    cxsure(d) {
      this.pop_one = false;
      if (!d) return;
      let that = this;
      u.exchangeConsume({
          phone: u.getStore("user").userid,
          num: this.bpx,
          tokenType: u.getStore("winning").type,
        },data=>{
        if(data.code==200){
          u.add(
            {
              copperNum: Number(that.tong),
              num: Number(that.gold),
              operatingType: 0,
              phone: u.getStore("user").userid,
              silverNum: Number(that.ying),
              userId: u.getStore("user").userid,
              type: 0
            },
            data => {
              var date = data;
              if(data[0].code==200){
                u.updateStatus({
                  id: date[0].recharge.id,
                  isPass: 1,
                },data=>{
                  if(data[0].code==200){
                    this.$parent.loading({
                      message: "充值成功",
                      type: true
                    });
                    setTimeout(() => {
                      that.$router.push({ path: "/ginsengBalance" });
                      window.location.reload();
                    }, 2000);
                  }else{
                    this.$parent.loading({
                      message: "充值失败",
                      type: false
                    });
                  }
                })
                u.setStore(
                  "freezing_amount",
                  parseInt(u.getStore("freezing_amount")) + parseInt(that.number)
                );
                that.freemount = u.getStore("freezing_amount");
              }else{
                this.$parent.loading({
                  message: "充值失败",
                  type: false
                });
              }
              /*u.sell(
                {
                  ztype: 4,
                  bat_id: u.getStore("winning").bau_id,
                  type: 1,
                  amount: this.bpx,
                  phone: u.getStore("user").name,
                  address: "xxx",
                  bag_id: data[0].recharge.id
                },
                data => {
                  if (data.code == "200") {
                    this.$parent.loading({
                      message: "种子充值中，等待审核～",
                      type: true
                    });
                    setTimeout(() => {
                      that.$router.push({ path: "/ginsengBalance" });
                      window.location.reload();
                    }, 1200);
                  } else {
                    this.$parent.loading({
                      message: "充值失败，请检查余额",
                      type: false
                    });
                  }
                }
              );*/
              that.jlflag = true;
              that.number = 0;
            }
          );
        }else{
          this.$parent.loading({
            message: "充值失败",
            type: false
          });
        }
      })
    },
    shop() {
      var that = this;
      // if (!u.tirm(this.address)) {
      //   alert("请输入地址");
      //   return;
      // } else {
      //   var address = u.tirm(this.address);
      // }

      var gold = Number(that.gold);
      var ying = Number(that.ying);
      var tong = Number(that.tong);
      if (gold < 0 || ying < 0 || tong < 0 || gold + ying + tong === 0) {
        // return alert("请输入正确的金额");
        return this.$parent.loading({
          message: "请输入正确的金额",
          type: false
        });
      }
      this.pop_one = true;
    },

    changeImg() {
      if (this.choose == false) {
        $(".agree img").attr("src", "../../../static/image/z_ok.png");
        this.choose = !this.choose;
      } else {
        $(".agree img").attr("src", "../../../static/image/radio.png");
        this.choose = !this.choose;
      }
    }
  }
};
</script>
<style scoped lang='less'>
.Popup-one {
  background: url("../../../static/image/Panel.png") no-repeat;
  height: 210px;
  width: 460px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
  z-index: 100;
}
.Popup-one > .Popup-one-bottom {
  display: flex;
  justify-content: space-around;
  top: 40px;
  position: relative;
}
.Popup-one > .Popup-one-bottom > img:nth-of-type(1) {
  margin-right: 40px;
}
.Popup-one > .Popup-one-bottom > img:nth-of-type(1) {
  margin-left: 40px;
}
.Popup-one > .Popup-one-top {
  text-shadow: 0 2px #505050, 2px 0 #505050, -2px 0 #505050, 0 -1px #505050;
  height: 150px;
  font-size: 28px;
  color: #fff;
  line-height: 150px;
  position: relative;
  font-size: 24px;
  color: white;
  z-index: 0;
}
.Popup-one > .Popup-one-top::before {
  position: absolute;
  z-index: -1;
  content: attr(data-attr);
  -webkit-text-stroke: 5px #533c1f;
}
.g1-title {
  font-size: 24px;
  line-height: 45px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: 0 2px #3a230a, -2px 0 #3a230a, -1px 2px #3a230a, -2px 1px #3a230a;
  font-size: 24px;
  color: white;
  z-index: 0;
  vertical-align: top;
}
.g2 {
  display: inline-block;
  width: 63%;
  height: 55px;
  background: url("../../../static/image/http.png") no-repeat center;
  background-size: 100% 100%;
  text-align: center;

  input {
    width: 95%;
    background-color: transparent;
    border: 0;
    height: 100%;
    font-size: 18px;
    font-weight: 700;
    padding-left: 1%;
    color: white;
    text-shadow: 0 2px #a56a2c, -2px 0 #a56a2c, -2px 2px #a56a2c,
      -2px 1px #a56a2c;
    &:focus {
      outline: none;
    }
  }
}
.container {
  width: 100%;
  height: 100vh;
  padding: 30px 34px 50px 32px;
  background: url(../../../static/image/ginsengbg2.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
}
.top {
  width: 100%;
  height: 17%;
  background: url(../../../static/image/z_6.png) no-repeat scroll top left;
  background-size: 100% 100%;
  margin-bottom: 2%;
}
.bottom {
  width: 100%;
  height: 80%;
  background: url(../../../static/image/ginsengbase2.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  padding: 2% 5% 0 3%;
}
.bottom h2 {
  width: 50%;
  height: 90px;
  background: url(../../../static/image/z_3.png) no-repeat scroll top left;
  background-size: 100% 100%;
  text-align: center;
  font-size: 26px;
  line-height: 53px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
  text-shadow: 0 2px #1c6b65, -3px 0 #1c6b65, -2px 2px #1c6b65, -3px 2px #1c6b65;
  font-weight: bold;
  margin-left: 27%;
  margin-bottom: 3%;
}
.fir {
  display: flex;
  flex-direction: row;
}
.fir span {
  padding-top: 16px;
  text-shadow: 0 2px #3a230a, -2px 0 #3a230a, -1px 2px #3a230a, -2px 1px #3a230a;
}
.right {
  width: 80%;
  margin-bottom: 5%;
  margin-left: 1%;
}
span {
  font-size: 24px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  margin-right: 2%;
  white-space: nowrap;
}
.btns {
  width: 100%;
  margin-bottom: 2%;
}
.btns a {
  display: inline-block;
  width: 36%;
  height: 48px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_7.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  font-family: "MicrosoftYaHei-Bold";
  margin-right: 13%;
  margin-bottom: 8%;
}
.count {
}
.btns p {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  position: relative;
  text-shadow: 0 2px #a56a2c, -2px 0 #a56a2c, -2px 2px #a56a2c, -2px 1px #a56a2c;
}
.btns img {
  margin-top: 2%;
  position: absolute;
  width: 20px;
  left: 70%;
  top: 10%;
}
p {
  font-size: 24px;
  line-height: 65px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  margin-right: 5%;
}
.btns input {
  margin-top: 2px;
  margin-left: 4%;
  display: inline-block;
  width: 60%;
  height: 65px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_8.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 20px;
  line-height: 65px;
  text-align: left;
  text-shadow: 0 2px #4f4f4f, -2px 0 #4f4f4f, -1px 2px #4f4f4f, -2px 1px #4f4f4f;
  padding: 0 5%;
  position: relative;
}
.btns .down {
  top: 48%;
}
.sec {
  display: flex;
  flex-direction: row;
  margin-top: 25px;
}
.sec span {
  padding-top: 15px;
  text-shadow: 0 2px #3a230a, -2px 0 #3a230a, -1px 2px #3a230a, -2px 1px #3a230a;
}
.sec .pay {
  display: flex;
  flex-direction: column;
  position: relative;
}
.pay p {
  font-size: 28px;
  white-space: nowrap;
  margin-bottom: 3%;
  text-shadow: 0 2px #a56a2c, -2px 0 #a56a2c, -2px 2px #a56a2c, -2px 1px #a56a2c;
}
.pay a {
  display: inline-block;
  width: 50%;
  height: 70px;
  color: #ffffff;
  text-decoration: none;
  background: url(../../../static/image/z_1.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 24px;
  line-height: 58px;
  text-align: center;
  font-family: "MicrosoftYaHei";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
  margin-bottom: 50%;
  position: relative;
  left: 62%;
}
.agree {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agree img {
  width: 17%;
  height: 17%;
  margin-right: 3%;
}
.agree p {
  font-size: 22px;
  line-height: 36px;
  margin-top: 1%;
}
</style>
